<template>
    <div class="item" @click="itemClick">
        <div class="rank" v-show="rank">
            <span :class="getRankCls(index)" v-text="getRankText(index)"></span>
        </div>
        <div class="content">
            <h2 class="name">{{song.name}}</h2>
            <p class="desc">{{getDesc(song)}}</p>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'song-list',
        props: {
            song: {
                type: Object,
                default() {
                    return {}
                }
            },
            index: {
                type: Number,
                default: 0
            },
            rank: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            itemClick() {
              this.$emit('click', this.song, this.index)
            },
            getDesc(song) {
                return `${song.singer}·${song.album}`
            },
            getRankCls(index) {
                if (index <= 2) {
                    return `icon icon${index}`
                } else {
                    return 'text'
                }
            },
            getRankText(index) {
                if (index > 2) {
                    return index + 1
                }
            }
        }
    }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
.item
  display: flex
  align-items: center
  box-sizing: border-box
  height: 64px
  font-size: $font-size-medium
  .rank
    flex: 0 0 25px
    width: 25px
    margin-right: 30px
    text-align: center
    .icon
      display: inline-block
      width: 25px
      height: 24px
      background-size: 25px 24px
      &.icon0
        bg-image('first')
      &.icon1
        bg-image('second')
      &.icon2
        bg-image('third')
    .text
      color: $color-theme
      font-size: $font-size-large
  .content
    flex: 1
    line-height: 20px
    overflow: hidden
    .name
      no-wrap()
      color: $color-text
    .desc
      no-wrap()
      margin-top: 4px
      color: $color-text-d
</style>